<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CITECT 用户管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="citect usermanager" />
<meta name="keywords" content="citect datatables usermanager" />
<meta name="author" content="jimmy lee" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--  Bootstrap -->
<link rel="stylesheet" href="<%=basePath%>content/bootstrapV3.0.0/css/bootstrap.min.css" type="text/css" >
<!--font awesome -->
<link rel="stylesheet" href="<%=basePath%>content/font-awesome/css/font-awesome.min.css" type="text/css" >

<!--jquery_datatables 样式-->
<link rel="stylesheet" href="<%=basePath%>content/jquery_datatables/css/dataTables.bootstrap.min.css" type="text/css" >
<!--<link rel="stylesheet" href="<%=basePath%>content/jquery_datatables/css/dataTables.jqueryui.min.css" type="text/css" >-->

<!--admin lte2 -->
<link rel="stylesheet" href="<%=basePath%>content/adminlte/css/AdminLTE.min.css" type="text/css" >
<!--admin lte2 skin choose -->
<link rel="stylesheet" href="<%=basePath%>content/adminlte/css/skins/_all-skins.min.css" type="text/css" >

 <!--自定义-->
<link rel="stylesheet" href="<%=basePath%>content/common/css/common.css" type="text/css" >

<style type="text/css">
    #dt_example .row:first-child,.dataTables_info{
        color: white;
    }

    #dt_example .row:first-child select option{
        color: black;
    }
    
    .content .row option{
        color: black;
    }

</style>

</head>
<body class="skin-blue ">  
    <div class="wrapper ">
        
    <!-- Content Wrapper. Contains page content -->
    <div class="" style="">
      <!-- Content Header (Page header) -->
      <section class="content-header" style="color:white">
        <h1>
          用户配置
          <small></small>
        </h1>
        
      </section>

      <!-- Main content -->
      <section class="content">
            <div class="row" >
              <div class="" style="margin-top:0px;height:35px;margin-left: 15px;">
                  <div>
                      <div style="width:150px;float:left">
                          <select id="FilterDateOfType" class="form-control"></select>
                      </div>
                      <div style="width:200px;float:left;margin-left:10px" data-column="-1">
                          <input type="text" class="global_filter form-control" placeholder="在结果中搜索" id="jimmylee_filter">
                      </div>
                      <p style="margin-right: 20px;" class="pull-right">
                          <button class="btn  btn-default" id="btn_user_reflash">刷新</button>
                          <button class="btn  btn-default" id="btn_user_edit">编辑</button>
                          <button class="btn  btn-default" id="btn_user_add">增加</button>
                          <button class="btn  btn-default" id="btn_user_del" onclick="delete_userinfo();">删除</button>
                      </p>  
                      
                  </div>
              </div>
            </div>
            <div id="dt_example" class="user_main_datatalbe" style="margin:10px 0 0 0;">
            <table class="table table-condensed table-striped table-hover table-bordered pull-left" id="user_main_datatalbe" width="100%" cellspacing="0">
                <thead></thead>
                <tbody></tbody>
            </table>
                <div class="clearfix"></div>
            </div>
      </section><!-- /.content -->
    </div><!-- /.content-wrapper -->
    </div>
     
    <!-- 用户编辑模态窗口（新增共用）-->
    <div class="modal" id="userModal" tabindex="-1" role="dialog"
     aria-labelledby="userModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="userModalLabel">
                    <label class="grouplabel"><i class="fa fa-user"></i> 用户信息</label>
                </h4>
            </div>
            <div class="modal-body">
                <div class="modal_body_content">
                   <form class="form-horizontal no-margin">      
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">用户名</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <input class="form-control" id="input_username" placeholder="请输入用户名">
                                            </div>
                                            <span class="mini-title-input col-sm-1">
                                                
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">密码</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <input class="form-control"  type="password" id="input_password" placeholder="请输入密码">
                                            </div>
                                            <span class="mini-title-input col-sm-6">
                                                (密码8-20位，必须包含数字、字母)
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">确认密码</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-sm-4">
                                                <input class="form-control"  type="password" id="input_password_again" placeholder="请再次输入密码">
                                            </div>
                                            <span class="mini-title-input col-sm-1">
                                                
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">车站选择</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-md-4 col-sm-4 col-xs-4">
                                                <select class="form-control" id="stationlist">
                                                    <option value="0">
                                                        - 请选择车站 -
                                                    </option>
                                                    <option value="学林路站">
                                                        学林路站
                                                    </option>
                                                    <option value="长清路站">
                                                        长清路站
                                                    </option>
                                                    <option value="成山路站">
                                                        成山路站
                                                    </option>
                                                    <option value="东明路站">
                                                        东明路站
                                                    </option>
                                                    <option value="华鹏路站">
                                                        华鹏路站
                                                    </option>
                                                    <option value="下南路站">
                                                        下南路站
                                                    </option>
                                                    <option value="北蔡站">
                                                        北蔡站
                                                    </option>
                                                    <option value="陈春东路站">
                                                        陈春东路站
                                                    </option>
                                                    <option value="莲溪路站">
                                                        莲溪路站
                                                    </option>
                                                    <option value="华夏中路站">
                                                        华夏中路站
                                                    </option>
                                                    <option value="中科路站">
                                                        中科路站
                                                    </option>
                                                    <option value="张江路站">
                                                        张江路站
                                                    </option>
                                                    <option value="江宁路站">
                                                        江宁路站
                                                    </option>
                                                    
                                                </select>
                                            </div>
                                            <span class="mini-title-input col-sm-1">
                                                
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">权限选择</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-md-4 col-sm-4 col-xs-4">
                                                <select class="form-control" id="userrolelist">
                                                    <option value="0">
                                                        - 请选择角色 -
                                                    </option>
                                                </select>
                                            </div>
                                            <span class="mini-title-input col-sm-1">
                                               
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </form>
                </div>
            </div>
            <div class="modal-footer">
                
                <button type="button" class="btn btn-default" id="btn_usermodal_update">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" id="btn_usermodal_hide">关闭</button>
            </div>
        </div>
    </div>
</div>
    
    
<!--jquery lib -->   
<script type="text/javascript" src="<%=basePath%>content/jquery.min.1.11.3.js" charset="UTF-8"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="<%=basePath%>content/bootstrapV3.0.0/js/bootstrap.min.js" charset="UTF-8"></script>
<!-- adminlte 不引用无法进行左侧菜单滑动-->
<script type="text/javascript" src="<%=basePath%>content/adminlte/js/app.min.js" charset="UTF-8"></script>


<!--datatables -->
<script src="<%=basePath%>content/jquery_datatables/js/jquery.dataTables.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="<%=basePath%>content/jquery_datatables/js/dataTables.bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
<!--<script src="<%=basePath%>content/jquery_datatables/js/dataTables.jqueryui.min.js" type="text/javascript" charset="UTF-8"></script>-->

<!--layer-->
<script src="<%=basePath%>content/layer/layer.js" type="text/javascript" charset="UTF-8"></script>

<!--common test -->
<!--<script src="<%=basePath%>content/common.js" type="text/javascript" charset="UTF-8"></script>-->
<!--common -->
<script src="<%=basePath%>content/common/js/common.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
    //禁用右键
    if (window.Event) document.captureEvents(Event.MOUSEUP); 
    document.oncontextmenu = nocontextmenu;  // for IE5+
    document.onmousedown = norightclick;  //for all others

    //ready start
    var user_main_datatalbe//页面主查询表
    $(document).ready(function () {
            //datatable原始按钮隐藏
            $("#searchbtn >.fa-spin").hide();
            //datatable初始化
            columnsetting = [
                       { "title": "用户名", "width": "100px", },
                       { "title": "所属站点", "width": "200px", },
                       { "title": "角色", "width": "100px", },
                       { "title": "用户ID", "width": "50px", },//不可见
                       { "title": "权限ID", "width": "50px", },//不可见
                       { "title": "用户密码", "width": "50px", },//不可见
            ];
            NoSortable_list = [3,4,5];
            NoSearchable_list = [3,4,5];
            NoSeeable_list = [3,4,5];

            user_main_datatalbe=datatalbes_init('user_main_datatalbe', NoSortable_list, NoSearchable_list, NoSeeable_list, columnsetting)
            
            
            
            //查询分类
            temps = '<option value="0">- 全部 -</option>'
                 + '<option value="1">用户名</option>'
                 + '<option value="2">所属站点</option>'
                 + '<option value="3">角色</option>';
               
            $('#FilterDateOfType').append(temps);
            
            //查询 绑定输入搜索事件
            $('input.global_filter').on('keyup click', function () {
                var a = $(this).parents('div').attr('data-column');
                if (a == -1 || typeof (a) == undefined) { filterGlobal(); }
                else { filterColumn(a) };

            });
            
            //获取用户信息
            get_userinfo();
            //获取用户权限 信息 
            get_userrole()
            
    })
    
    //选中行数据获取
    var selrow_obj;//选中行的数据对象 
    //表格选中 针对datatable实例初始化
    $('#user_main_datatalbe tbody').on( 'click', 'tr', function () {
        selrow_obj=user_main_datatalbe.row( this ).data();
        user_main_datatalbe.$('tr.selected').removeClass('selected');
        $(this).toggleClass('selected');
//        if ( $(this).hasClass('selected') ) {
//            $(this).removeClass('selected');
//        }
//        else {
//            user_main_datatalbe.$('tr.selected').removeClass('selected');
//            $(this).addClass('selected');
//        }
    } );
    
    
    //获取用户信息 绑定到用户信息表
    get_userinfo=function(){
         //获取所有用户信息 不分页
         SendAjax("${basePath}user/getUserByParams", null, false,
                function (datastr) {
                    if (datastr) {
                        //var result = eval("(" + datastr + ")");
                        result=datastr.rows;
                        if (result && result.length > 0) {
                            var contentlist = [];//保存data内容
                            //有数据进行处理
                            for (var i = 0; i < result.length; i++) {
                                //
                                var obj = result[i];
                                contentlist.push([
                                  obj.userName,
                                  obj.stationName,
                                  obj.userRole.roleName,
                                  obj.uid,
                                  obj.furid,
                                  obj.password
                                ])
                                
                            }
                            //绑定到datatable上面
                            //如果有数据 刷新datatables控件
                            if (contentlist.length >= 1) {
                                user_main_datatalbe.rows.add(contentlist).draw();
                            }

                        }
                        else {
                            $("#user_main_datatalbe.dataTables_empty").show();
                        }
                    }
                },
                { 'errormsg': '查询信息失败', 'errorfunction': null },
                { 'timeoutmsg': '查询信息超时', 'timeoutset': -1, 'timeoutfunction': null });
    }
    //增加用户
    add_userinfo=function(){
        var jsonobj = check_userinfo();
        if(!jsonobj)return null;//用户信息校验未通过，退出
        //获取所有用户信息 不分页
         SendAjax("${basePath}user/addUser", jsonobj, false,
                function (datastr) {
                    if (datastr) {
                        var code_t=datastr.code;
                        var message_t=datastr.message;
                        alert("用户数据"+message_t);
                        if(code_t="success"){   
                            //操作成功，关闭窗口
                            hide_usermodal();
                            document.getElementById("btn_user_reflash").click(); 
                        }
                        else if(code_t="error"){
                            //nothing
                        }
                        else{
                            //nothing
                        }
                    }
                   
                },
                { 'errormsg': '新增用户操作失败', 'errorfunction': null },
                { 'timeoutmsg': '新增用户操作超时', 'timeoutset': -1, 'timeoutfunction': null });
    }
    //更新用户 必要参数 uid/userName/password/stationName/urid
    update_userinfo=function(){
        var jsonobj = check_userinfo();
        if(!jsonobj)return null;//用户信息校验未通过，退出
        //获取所有用户信息 不分页
         SendAjax("${basePath}user/updateUser", jsonobj, false,
                function (datastr) {
                    if (datastr) {
                        var code_t=datastr.code;
                        var message_t=datastr.message;
                        alert("用户数据"+message_t)
                        if(code_t="success"){   
                            //操作成功，关闭窗口 
                            hide_usermodal();
                            document.getElementById("btn_user_reflash").click(); 
                        }
                        else if(code_t="error"){
                            //nothing
                        }
                        else{
                            //nothing
                        }

                    }
                },
                { 'errormsg': '更新用户操作失败', 'errorfunction': null },
                { 'timeoutmsg': '更新用户操作超时', 'timeoutset': -1, 'timeoutfunction': null });
    }
    //删除用户 必要参数 uid
    delete_userinfo=function(){
        //获取选中行的uid
        if(!selrow_obj){
            alert("没有用户数据被选中。");
            return null;
        }
        var uid_t=selrow_obj[3];
        var jsonobj = {uid:uid_t};
        SendAjax("${basePath}user/deleteUser", jsonobj, false,
               function (datastr) {
                   if (datastr) {
                       var code_t=datastr.code;
                       var message_t=datastr.message;

                       if(code_t="success"){   
                           alert("用户数据"+message_t)
                           document.getElementById("btn_user_reflash").click(); 
                       }
                       else if(code_t="error"){
                           alert("用户数据"+message_t)
                           //nothing
                       }
                       else{
                           //nothing
                       }
                   }
               },
               { 'errormsg': '删除用户操作失败', 'errorfunction': null },
               { 'timeoutmsg': '删除用户操作超时', 'timeoutset': -1, 'timeoutfunction': null });
    }
    
    hide_usermodal=function(){
        $('#userModal').modal('toggle');
        //document.getElementById("userModal").modal('toggle');
    }
    //用户信息数据校验
    var check_userinfo=function(){
        username_t=document.getElementById('input_username').value;  
        stationname_t=document.getElementById('stationlist').value;  
        password_t=document.getElementById('input_password').value;
        password_again_t=document.getElementById('input_password_again').value;
        userrole_t=document.getElementById('userrolelist').value;  
        if(username_t==""){
            alert("请填写用户名");
            return null;
        }
        if(password_t==""||password_again_t==""){
            alert("密码不能为空");
            return null;
        }
        //用户密码做限制（不超过20个字符）
        if(password_t!=password_again_t){
            alert("2次密码输入不一致");
            return null;
        }
        else{
            //密码一致 8-20位 必须有数字、字母、无特殊字符
            //var psd_reg=/^([0-9])|([a-zA-Z])|([a-zA-Z0-9])\w{7,19}$/;
            var psd_reg=/^([a-zA-Z0-9])\w{7,19}$/;
            if(!psd_reg.test(password_t)){
                alert("密码不符合要求")
                return null;
            }
        }
        //
        if(stationname_t=="0"){
            alert("请选择一个站点");
            return null;
        }
        if(userrole_t=="0"){
            alert("请选择一个用户角色");
            return null;
        }
        var jsonobj = {userName:username_t,password:password_t,stationName:stationname_t,urid:userrole_t};
        if(operflag_user==0){ //更新操作 需要补充uid
            jsonobj.uid=  selrow_obj[3].toString();
        }
        return jsonobj;
    }
    
    
    //获取用户权限
    get_userrole=function(){ 
        SendAjax("${basePath}userRole/getUserRoleByParams", null, false,
                function (datastr) {
                    if (datastr) {
                        result=datastr.rows;
                        if (result && result.length > 0) {
                            var contentlist = [];//保存data内容
                            //有数据进行处理
                            for (var i = 0; i < result.length; i++) {
                                //
                                var obj = result[i];
                                //权限列表添加
                                var sel= document.getElementById("userrolelist"); 
                                sel.options.add(new Option(obj.roleName,obj.urid));   
                            }
                        }
                        else {
                            alert("权限信息数据空");
                        }
                    }
                },
                { 'errormsg': '获取权限信息失败', 'errorfunction': null },
                { 'timeoutmsg': '获取权限信息超时', 'timeoutset': -1, 'timeoutfunction': null });
    }
    
    
    
    //刷新用户信息表
    $('#btn_user_reflash').on('click','' , function () {
        user_main_datatalbe.clear();
        get_userinfo();
    })
    var operflag_user;//窗口操作标志 0 更新/1新增
    //绑定table点击事件，弹出模态框             
    $('#btn_user_edit').on('click','' , function () {
        //获取选中行的uid
        if(!selrow_obj){
            alert("没有用户数据被选中。");
            return null;
        }
        user_modal_clean();
        //窗口操作类型
        operflag_user=0;
        //初始化窗口信息
        initial_edit_modal(selrow_obj);
        show_eidt_modal(this);
        //刷新modal的窗体信息
    })
    //初始化编辑窗口 用选择的列对象
    initial_edit_modal=function(selrowobj){
        document.getElementById('stationlist').value=selrowobj[1];
        document.getElementById('userrolelist').value=selrowobj[4];
        document.getElementById('input_username').value=selrowobj[0];
        document.getElementById('input_password').value=selrowobj[5];
        document.getElementById('input_password_again').value=selrowobj[5];
  
    }
    //新增用户
    $('#btn_user_add').on('click','' , function () {
        //
        user_modal_clean();
        //窗口操作类型
        operflag_user=1;
        show_eidt_modal(this);

    })

    
    $('#btn_usermodal_update').on('click','' , function () {
        if(operflag_user==1){//新增
            add_userinfo();
        }
        else if(operflag_user==0){//更新
            update_userinfo();
        }
        else{
            //nothing
        }
        

    })
    
    //清空模态窗口内容
    user_modal_clean=function(){
        document.getElementById('stationlist').selectedIndex=0;
        document.getElementById('userrolelist').selectedIndex=0;
        document.getElementById('input_username').value='';
        document.getElementById('input_password').value='';
        document.getElementById('input_password_again').value='';
        
    }
    
    //弹出用户编辑窗口
    show_eidt_modal=function(){
        $('#userModal').modal('show');
    }
    
    
    
    //自定义搜索过滤 jquery datatables控件
    function filterGlobal() {
        $('#user_main_datatalbe').DataTable().search(
            $('#jimmylee_filter').val(),
            true,
            true
        ).draw();
    }

    function filterColumn(i) {
        $('#user_main_datatalbe').DataTable().column(i).search(
            $('#jimmylee_filter').val(),
            true,
            true
        ).draw();
    }

    //过滤列的选择
    $('#FilterDateOfType').on('click', 'option', function () {
        var a = parseInt($(this).attr('value'));
        $('input.global_filter').parents('div').attr('data-column', a - 1);
    })
    


</script>
</body>
</html>